<!--
 * @Description: 
 * @Author: 47
 * @Date: 2023-02-21 09:09:10
 * @LastEditors: 47
 * @LastEditTime: 2023-02-21 12:26:35
-->
<!--
 * @Description: 
 * @Author: 刘振
 * @Date: 2022-12-30 15:02:30
 * @LastEditors: 47
 * @LastEditTime: 2022-12-30 18:40:17
-->
<template>
    <div class="home-view">
        <!-- 导航栏 -->
        <van-nav-bar title="首页">
            <template #right>
                <van-icon name="enlarge" size="18" />
            </template>
        </van-nav-bar>

        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="image in images" :key="image">
                <img style="width: 100%;" fit="cover" :src="image" />
            </van-swipe-item>
        </van-swipe>
        <div class="cell-container">
            <van-cell is-link @click="goMyCourse">
                <template #title>
                    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M512 0c282.752 0 512 229.248 512 512S794.752 1024 512 1024 0 794.752 0 512 229.248 0 512 0z"
                            fill="#32ABD1" />
                        <path
                            d="M276.544 672.6016a33.536 33.536 0 0 1-14.976-27.904v-257.024h-48.64c-12.928 0-23.424 10.496-23.424 23.424v304.64c0 12.928 10.496 23.424 23.424 23.424h163.968l-100.352-66.56z"
                            fill="#CCEBF4" />
                        <path
                            d="M443.456 756.0576l-145.28-96.512c-9.344-6.144-14.976-16.64-14.976-27.904v-335.872a33.4848 33.4848 0 0 1 52.096-27.904l104.96 69.632a123.7248 123.7248 0 0 1 55.296 103.04v287.488c0 18.56-14.976 33.536-33.536 33.536-6.656 0.128-13.056-1.92-18.56-5.504"
                            fill="#FFFFFF" />
                        <path
                            d="M747.584 672.6016a33.536 33.536 0 0 0 14.976-27.904v-257.024h48.64c12.928 0 23.424 10.496 23.424 23.424v304.64c0 12.928-10.496 23.424-23.424 23.424h-163.968l100.352-66.56z"
                            fill="#CCEBF4" />
                        <path
                            d="M580.8 756.0576l145.28-96.512c9.344-6.144 14.976-16.64 14.976-27.904v-335.872a33.4848 33.4848 0 0 0-52.096-27.904l-104.96 69.632a123.7248 123.7248 0 0 0-55.296 103.04v287.488c0 18.56 14.976 33.536 33.536 33.536 6.528 0.128 13.056-1.92 18.56-5.504"
                            fill="#FFFFFF" />
                    </svg>
                    <div class="cell-item-dec">我的课程</div>
                </template>
            </van-cell>
            <van-cell  is-link @click="goAllExam">
                <template #title>
                    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M884.447698 1023.964782H139.522538a23.970364 23.970364 0 0 1-23.970364-23.970364v-48.555353h792.865888v48.555353a22.741115 22.741115 0 0 1-23.970364 23.970364zM920.710556 0H103.25968A26.428863 26.428863 0 0 0 79.289316 23.970364v889.361969a26.428863 26.428863 0 0 0 23.970364 23.970364h817.450876a26.428863 26.428863 0 0 0 23.970364-23.970364V23.970364a24.584989 24.584989 0 0 0-23.970364-23.970364z"
                            fill="#2588C4" />
                        <path
                            d="M735.093891 417.944809a19.053366 19.053366 0 0 1-19.053366 19.667991H478.180758a19.053366 19.053366 0 0 1-19.053366-19.667991 19.053366 19.053366 0 0 1 19.053366-19.053366h237.859767c9.833996 2.458499 19.053366 9.833996 19.053366 19.053366zM348.494943 401.349942h45.482229a19.667991 19.667991 0 1 1 0 38.721357h-45.482229a19.053366 19.053366 0 0 1-19.053367-19.667991 17.209492 17.209492 0 0 1 19.053367-19.053366zM230.486997 634.29271a47.940728 47.940728 0 0 1 0-95.881456 47.940728 47.940728 0 1 1 0 95.881456zM230.486997 466.500162a48.555353 48.555353 0 0 1-47.940728-48.555353 47.940728 47.940728 0 0 1 47.940728-47.940728 48.555353 48.555353 0 0 1 48.555352 47.940728 49.169978 49.169978 0 0 1-48.555352 48.555353zM230.486997 298.092989a47.940728 47.940728 0 0 1-47.940728-47.940728 48.555353 48.555353 0 0 1 47.940728-48.555353 49.169978 49.169978 0 0 1 48.555352 48.555353 48.555353 48.555353 0 0 1-48.555352 47.940728zM514.443617 605.405348H346.036444a19.053366 19.053366 0 0 1 0-38.106732h168.407173a19.053366 19.053366 0 0 1 19.053366 19.053366 20.282616 20.282616 0 0 1-19.053366 19.053366zM843.267842 658.263074l-170.251048 156.729304a17.824117 17.824117 0 0 1-26.428863-2.458499l-79.286588-72.525717a21.511865 21.511865 0 0 1-2.458499-26.428863 23.355739 23.355739 0 0 1 26.428863-2.458499l69.452593 62.691721 158.573178-144.436809a17.824117 17.824117 0 0 1 26.428862 2.458499 21.511865 21.511865 0 0 1-2.458498 26.428863z"
                            fill="#C7E2F3" />
                    </svg>
                    <div class="cell-item-dec">考试</div>
                </template>
            </van-cell>
            <van-cell is-link @click="goNote">
                <template #title>
                    <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M822.6 959.6h-599c-26 0-47-21.1-47-47V109.2c0-26 21.1-47 47-47h599c26 0 47 21.1 47 47v803.4c0.1 25.9-21 47-47 47z"
                            fill="#83CDFF" />
                        <path
                            d="M341 959.6H224.3c-26.4 0-47.7-21.4-47.7-47.7v-802c0-26.4 21.4-47.7 47.7-47.7H341v897.4z"
                            fill="#4F95FC" />
                        <path
                            d="M859.2 286.3H558.3c-19.4 0-35.1-15.7-35.1-35.1 0-19.4 15.7-35.1 35.1-35.1h300.9c5.8 0 10.5 4.7 10.5 10.5v49.2c0 5.8-4.7 10.5-10.5 10.5z"
                            fill="#FFF188" />
                        <path
                            d="M848.7 234.6v33.3H560.4c-9 0-16.2-7.3-16.2-16.2 0-9.4 7.6-17 17-17h287.5m7.9-21.1H561.2c-21 0-38 17-38 38 0 20.6 16.7 37.3 37.3 37.3h296.3c7.2 0 13-5.8 13-13v-49.2c-0.1-7.3-6-13.1-13.2-13.1z" />
                        <path
                            d="M859.2 434H558.3c-19.4 0-35.1-15.7-35.1-35.1 0-19.4 15.7-35.1 35.1-35.1h300.9c5.8 0 10.5 4.7 10.5 10.5v49.2c0 5.8-4.7 10.5-10.5 10.5z"
                            fill="#FFF188" />
                        <path
                            d="M848.7 382.2v33.3H560.4c-9 0-16.2-7.3-16.2-16.2 0-9.4 7.6-17 17-17h287.5m7.9-21.1H561.2c-21 0-38 17-38 38 0 20.6 16.7 37.3 37.3 37.3h296.3c7.2 0 13-5.8 13-13v-49.2c-0.1-7.3-6-13.1-13.2-13.1z" />
                        <path
                            d="M859.2 586.9H558.3c-19.4 0-35.1-15.7-35.1-35.1 0-19.4 15.7-35.1 35.1-35.1h300.9c5.8 0 10.5 4.7 10.5 10.5v49.2c0 5.8-4.7 10.5-10.5 10.5z"
                            fill="#FFF188" />
                        <path
                            d="M848.7 535.1v33.3H560.4c-9 0-16.2-7.3-16.2-16.2 0-9.4 7.6-17 17-17h287.5m7.9-21.1H561.2c-21 0-38 17-38 38 0 20.6 16.7 37.3 37.3 37.3h296.3c7.2 0 13-5.8 13-13v-49.2c-0.1-7.3-6-13.1-13.2-13.1z" />
                        <path
                            d="M822.6 83.1c14.4 0 26 11.7 26 26v803.4c0 14.4-11.7 26-26 26h-599c-14.4 0-26-11.7-26-26V109.2c0-14.4 11.7-26 26-26h599m0-21.1h-599c-26 0-47 21.1-47 47v803.4c0 26 21.1 47 47 47h599c26 0 47-21.1 47-47V109.2c0.1-26-21-47.1-47-47.1z" />
                        <path
                            d="M320 83.1v855.4h-95.7c-14.7 0-26.7-12-26.7-26.7v-802c0-14.7 12-26.7 26.7-26.7H320m21-21H224.3c-26.4 0-47.7 21.4-47.7 47.7v802c0 26.4 21.4 47.7 47.7 47.7H341V62.1z" />
                        <path
                            d="M228.6 184.9h-85.9c-1.5 0-2.8-1.3-2.8-2.8v-23.8c0-1.5 1.3-2.8 2.8-2.8h85.9c1.5 0 2.8 1.3 2.8 2.8v23.8c0 1.6-1.2 2.8-2.8 2.8z"
                            fill="#5CC5FF" />
                        <path
                            d="M211.6 166.1c2.2 0 4.1 1.9 4.1 4.1 0 2.2-1.9 4.1-4.1 4.1h-51.8c-2.2 0-4.1-1.9-4.1-4.1 0-2.2 1.9-4.1 4.1-4.1h51.8m0-15.7h-51.8c-10.9 0-19.9 8.9-19.9 19.9s8.9 19.9 19.9 19.9h51.8c10.9 0 19.9-8.9 19.9-19.9s-9-19.9-19.9-19.9z" />
                        <path
                            d="M228.6 877.3h-85.9c-1.5 0-2.8-1.3-2.8-2.8v-23.8c0-1.5 1.3-2.8 2.8-2.8h85.9c1.5 0 2.8 1.3 2.8 2.8v23.8c0 1.5-1.2 2.8-2.8 2.8z"
                            fill="#5CC5FF" />
                        <path
                            d="M211.6 858.5c2.2 0 4.1 1.9 4.1 4.1s-1.9 4.1-4.1 4.1h-51.8c-2.2 0-4.1-1.9-4.1-4.1s1.9-4.1 4.1-4.1h51.8m0-15.8h-51.8c-10.9 0-19.9 8.9-19.9 19.9 0 10.9 8.9 19.9 19.9 19.9h51.8c10.9 0 19.9-8.9 19.9-19.9-0.1-10.9-9-19.9-19.9-19.9z" />
                        <path
                            d="M228.6 738.8h-85.9c-1.5 0-2.8-1.3-2.8-2.8v-23.8c0-1.5 1.3-2.8 2.8-2.8h85.9c1.5 0 2.8 1.3 2.8 2.8V736c0 1.6-1.2 2.8-2.8 2.8z"
                            fill="#5CC5FF" />
                        <path
                            d="M211.6 720c2.2 0 4.1 1.9 4.1 4.1s-1.9 4.1-4.1 4.1h-51.8c-2.2 0-4.1-1.9-4.1-4.1s1.9-4.1 4.1-4.1h51.8m0-15.7h-51.8c-10.9 0-19.9 8.9-19.9 19.9 0 10.9 8.9 19.9 19.9 19.9h51.8c10.9 0 19.9-8.9 19.9-19.9-0.1-11-9-19.9-19.9-19.9z" />
                        <path
                            d="M228.6 600.3h-85.9c-1.5 0-2.8-1.3-2.8-2.8v-23.8c0-1.5 1.3-2.8 2.8-2.8h85.9c1.5 0 2.8 1.3 2.8 2.8v23.8c0 1.6-1.2 2.8-2.8 2.8z"
                            fill="#5CC5FF" />
                        <path
                            d="M211.6 581.5c2.2 0 4.1 1.9 4.1 4.1s-1.9 4.1-4.1 4.1h-51.8c-2.2 0-4.1-1.9-4.1-4.1s1.9-4.1 4.1-4.1h51.8m0-15.7h-51.8c-10.9 0-19.9 8.9-19.9 19.9 0 10.9 8.9 19.9 19.9 19.9h51.8c10.9 0 19.9-8.9 19.9-19.9-0.1-11-9-19.9-19.9-19.9z" />
                        <path
                            d="M228.6 461.9h-85.9c-1.5 0-2.8-1.3-2.8-2.8v-23.8c0-1.5 1.3-2.8 2.8-2.8h85.9c1.5 0 2.8 1.3 2.8 2.8v23.8c0 1.5-1.2 2.8-2.8 2.8z"
                            fill="#5CC5FF" />
                        <path
                            d="M211.6 443.1c2.2 0 4.1 1.9 4.1 4.1 0 2.2-1.9 4.1-4.1 4.1h-51.8c-2.2 0-4.1-1.9-4.1-4.1 0-2.2 1.9-4.1 4.1-4.1h51.8m0-15.8h-51.8c-10.9 0-19.9 8.9-19.9 19.9 0 10.9 8.9 19.9 19.9 19.9h51.8c10.9 0 19.9-8.9 19.9-19.9-0.1-10.9-9-19.9-19.9-19.9z" />
                        <path
                            d="M228.6 323.4h-85.9c-1.5 0-2.8-1.3-2.8-2.8v-23.8c0-1.5 1.3-2.8 2.8-2.8h85.9c1.5 0 2.8 1.3 2.8 2.8v23.8c0 1.5-1.2 2.8-2.8 2.8z"
                            fill="#5CC5FF" />
                        <path
                            d="M211.6 304.6c2.2 0 4.1 1.9 4.1 4.1s-1.9 4.1-4.1 4.1h-51.8c-2.2 0-4.1-1.9-4.1-4.1s1.9-4.1 4.1-4.1h51.8m0-15.8h-51.8c-10.9 0-19.9 8.9-19.9 19.9s8.9 19.9 19.9 19.9h51.8c10.9 0 19.9-8.9 19.9-19.9s-9-19.9-19.9-19.9z" />
                    </svg>
                    <div class="cell-item-dec">笔记</div>
                </template>
            </van-cell>
        </div>
        <div class="recommend-container">
            <div class="recommend-top" @click="goMoreCourse">
                <span class="recommend-title">推荐课程</span>
                <van-icon class="recommend-icon" name="arrow" />
                <span class="recommend-more">更多</span>
            </div>
            <div class="course-container">
                <!-- 推荐课程列表 -->
                <div class="course-item" v-for="(item,index) in courseList" :key="index">
                    <div class="left">
                         <img :src="item.course_img" alt="" class="course-img">
                         <div class="title">{{ item.course_name }}</div>
                    </div>
                   <!-- <div class="often">+常用</div> -->
                </div>
                <!-- <div class="course-item">
                    <div class="img-container">
                        <img fit="cover" position="left"
                            src="https://img.zcool.cn/community/012f2759697a80a8012193a3e27626.jpg@1280w_1l_2o_100sh.jpg" />
                    </div>
                    <span class="course-desc">
                        2022软件质量保证与测试
                    </span>
                    <van-tag text-color="#969799" round plain>+报名</van-tag>
                </div>
                <div class="course-item">
                    <div class="img-container">
                        <img fit="cover" position="left"
                            src="https://img.zcool.cn/community/012f2759697a80a8012193a3e27626.jpg@1280w_1l_2o_100sh.jpg" />
                    </div>
                    <span class="course-desc">
                        2022软件质量保证与测试
                    </span>
                    <van-tag text-color="#969799" round plain>+报名</van-tag>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted,computed } from 'vue';
import {useRouter} from 'vue-router'
// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';

// 实例化仓库对象
const course = useCourseStore()

// 解构 方法
const {getMoreCourseList} = course

// 解构 数据 想要是响应式就需要使用 storeToRefs
const {courseList} = storeToRefs(course)


const router = useRouter()
const value = ref('')
const images = [
    'https://tse4-mm.cn.bing.net/th/id/OIP-C.l6HBDUyBCZ6s6ouCO0ykYAHaEH?pid=ImgDet&rs=1',
    'https://tse4-mm.cn.bing.net/th/id/OIP-C.l6HBDUyBCZ6s6ouCO0ykYAHaEH?pid=ImgDet&rs=1',
    'https://tse4-mm.cn.bing.net/th/id/OIP-C.l6HBDUyBCZ6s6ouCO0ykYAHaEH?pid=ImgDet&rs=1',
    'https://tse4-mm.cn.bing.net/th/id/OIP-C.l6HBDUyBCZ6s6ouCO0ykYAHaEH?pid=ImgDet&rs=1',
];
// const toExamView = () => {
//     router.push({
//         name:'exam'
//     })
// }

// 组件挂载完毕渲染页面
onMounted(() => {
  getMoreCourseList()
})

const goMoreCourse =() => {
    router.push('/morecourse')
}

const goMyCourse =() => {
    router.push('/mycourse')
}

const goNote = () => {
    router.push('/note')
}

const goAllExam = () => {
    router.push('/allexam')
}
</script>

<style lang="less" scoped>
.home-view {
    :deep(.van-nav-bar)  {
        width: 100%;
        position: fixed;
    }
    .van-search{
        padding-top: 53px;
    }

    .my-swipe .van-swipe-item {
        background-color: rgb(246, 246, 246);
        line-height: 25px;
    }

    .cell-container {
        background-color: rgb(246, 246, 246);
        padding-bottom: 8px;

        &:deep(.van-badge__wrapper) {
            line-height: 40px;
        }

        .icon {
            float: left;
            width: 38px;
            height: 38.00px;
        }

        .cell-item-dec {
            float: left;
            margin-top: 8px;
            margin-left: 8px;
        }
    }

    .recommend-container {
        padding-left: 20px;
        padding-bottom: 53px;

        .recommend-top {
            line-height: 30px;

            .recommend-title {
                font-weight: bolder;
                color: #323233;
                font-size: 15px;
            }

            .recommend-more {
                float: right;
                color: #969799;
                ;
                font-size: 13px;
            }

            .recommend-icon {
                float: right;
                color: #969799;
                ;
                margin-top: 7px;
                margin-right: 16px;
            }
        }

        .course-container {
            // .course-item {
            //     .img-container {
            //         width: 60px;
            //         height: 60px;
            //         overflow: hidden;
            //         display: inline-block;
            //         img {
            //             width: 100%;
            //             margin-top: 50%;
            //             transform: translateY(-50%);
            //         }
            //     }

            //     .course-desc {
            //         display: inline-block;
            //         position: relative;
            //         top: -23px;
            //         font-size: 14px;
            //         margin-left: 8px;
            //     }
            //     &:deep(.van-tag) {
            //         float: right;
            //         margin-top: 23px;
            //         margin-right: 20px;
            //     }
            // }
            .course-item{
                display: flex;
                flex-flow: row;
                justify-content: space-between;
                align-items: center;
                padding: 15px 20px 0 0;

                .left{
                    display: flex;
                    flex-flow: row;
                    align-items: center;


                    .course-img{
                        width: 50px;
                        border-radius: 6px;
                        margin-right: 20px;
                    }

                    .title{
                        font-size: 14px;
                    }

                   
                }
                .often{
                    padding: 3px 8px;
                    border: 1px solid rgb(177, 177, 177);
                    border-radius: 20px;
                    font-size: 13px;
                    color: rgb(177, 177, 177);
                }
            }
        }
    }
}
</style>
